<template>
  <div class="picker-wrapper">
    <ul class="tabs">
      <li :class="{'active': !currentProvince.name}" @click="changeProvince()">{{currentProvince.name?currentProvince.name:'省'}}</li>
      <li v-show="currentProvince.name" :class="{'active': currentProvince.name && !currentCity.name}" @click="changeCity()">{{currentCity.name?currentCity.name:'市'}}</li>
      <li v-show="currentCity.name" :class="isActive">{{currentCounty.name?currentCounty.name:'区'}}</li>
    </ul>

    <ul class="district" v-show="!currentProvince.name">
      <li v-for="(item,index) in provinceList" :key="index" @click="selectProvince(item,index)">{{index}}</li>
    </ul>

    <ul class="district" v-show="currentProvince.name && !currentCity.name">
      <li v-for="(item,index) in cityList" :key="index" @click="selectCity(item,index)">{{index}}</li>
    </ul>

    <ul class="district" v-show="isShowCounty">
      <li v-for="(item,index) in countyList" :key="index" @click="selectCounty(item,index)">{{index}}</li>
    </ul>

  </div>
</template>

<script>
import DISTRICTS from "./area";

const PROVINCE = 'province';
const CITY = 'city';
const COUNTY = 'county';

export default {
  name: "v-distpicker",
  data() {
    return {
      provinceList: [],
      cityList: [],
      countyList: [],
      currentProvince: {},
      currentCity: {},
      currentCounty: {},
      DISTRICTS: DISTRICTS
    };
  },
  created() {
    this.provinceList = DISTRICTS[PROVINCE];
  },
  computed: {
    isActive(){
      if(this.currentProvince.name && this.currentCity.name && !this.currentCounty){
        return 'active'
      }

      if(this.currentProvince.name && this.currentCity.name && this.currentCounty){
        return 'active'
      }
    },
    isShowCounty(){
      if(this.currentProvince.name && this.currentCity.name && !this.currentCounty){
        return true
      }

      if(this.currentProvince.name && this.currentCity.name && this.currentCounty){
        return true
      }
      return false;
    }
  },
  watch: {},
  methods: {
    selectProvince(item,index){
      this.currentProvince = {
        code: item,
        name: index
      };
    
      for(let x in this.DISTRICTS[CITY]){
        if(x == item){
          this.cityList = this.DISTRICTS[CITY][x] || []
        }
      }

    },
    selectCity(item,index){
      this.currentCity = {
        code: item,
        name: index
      };

      for(let x in this.DISTRICTS[COUNTY]){
        if(x == item){
          this.countyList = this.DISTRICTS[COUNTY][x] || []
        }
      }
    },
    selectCounty(item,index){
      this.currentCounty = {
        code: item,
        name: index
      };
      this.$emit('selected',this.currentProvince,this.currentCity,this.currentCounty)
    },
    changeProvince(){
      this.currentCounty = {};
      this.currentCity = {};
      this.currentProvince = {};
    },
    changeCity(){
      this.currentCounty = {};
      this.currentCity = {};
    }
  }
};
</script>

<style lang="less">
 @import "./areaPicker.less"; 
</style>
